<template>
  <div class="content_panel project_modules">
    <div class="content_panel_top">
      <h3 class="panel_title">
          <span>{{$t('operation.coloanlist')}}</span>
      </h3>
      <el-form ref="form" :inline="false" class="module_form">
        <el-row>
          <el-col :span="12">
            <el-button @click="handleModify" type="primary">{{ $t('common.modify') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="module_content">
        <div class="content_panel project_modules">
            <div class="table_list">
              <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <!-- 距离第一笔放款时间 -->
                  <el-table-column align="left" prop="startDays" :label="$t('common.disbursementdate')" min-width="120">
                    <template slot-scope="{ row }">{{getDateValue(row)}}</template>
                  </el-table-column>
                <!-- 最高可在贷笔数 -->
                  <el-table-column align="left" prop="maxCount" :label="$t('common.maxLoanAmount')" min-width="120"></el-table-column>
                <!-- 周期内可借新产品数量 -->
                  <el-table-column align="left" prop="newApplyCount" :label="$t('common.newProductNumber')" min-width="120"></el-table-column>
                <!-- 上一次修改 -->
                <el-table-column align="left" prop="updateTime" :label="$t('common.LastModification')" min-width="120">
                    <template slot-scope="{ row }">{{ row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
              </el-table>
          </div>
          <!--分页组件-->
          <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
        </div>
    </div>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改 "
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose">
      <div class="co-loan-list-modify">
        <header>
          <span>{{ $t('common.disbursementdate') }}</span>
          <span>{{ $t('common.maxLoanAmount') }}</span>
          <span>{{ $t('common.newProductNumber') }}</span>
        </header>
        <ul class="list" v-for="(item, index) in modifyData" :key="item.name" :class="{ error: item.error }">
          <li>
            <template v-if="item.type === 1">
              <el-input :value="$t('common.newCustomer')" disabled></el-input>
            </template>
            <template v-if="item.type === 2">
              <el-input :min='0' @input="($event) => handleKeyUp('startDays', index, $event)" type="number" v-model="item.startDays">
                <span class="prefix" slot="prefix">>=</span></el-input>
            </template>
            <template v-if="item.type === 3">
              <div class="input-group">
                <el-input :min='0' @input="($event) => handleKeyUp('startDays', index, $event)" type="number" class="small-input" v-model="item.startDays" ></el-input>
                <span>-</span>
                <el-input :min='0' @input="($event) => handleKeyUp('endDays', index, $event)" type="number" class="small-input" v-model="item.endDays" ></el-input>
              </div>
            </template>
          </li>
          <li><el-input :min='0' @input="($event) => handleKeyUp('maxCount', index, $event)" type="number" v-model="item.maxCount"></el-input></li>
          <li>
            <el-input :min='0' @input="($event) => handleKeyUp('newApplyCount', index, $event)" type="number" v-model="item.newApplyCount"></el-input>
            <i v-if="item.type === 3" class="el-icon-delete" @click="handleDelete(index)"></i>
          </li>
        </ul>
        <footer @click="handleClick">
          <i class="el-icon-plus"></i>
        </footer>
        <div class="btn-group">
          <el-button @click="handleSureModify" type="primary">{{$t('common.confirmOk')}}</el-button>
          <el-button @click="handleClose" type="primary">{{$t('common.cancel')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./main"></script>
<style lang="scss">
  .content_panel_top {
    padding-bottom: 10px;
  }
  .co-loan-list-modify {
    & > header, .list {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr; 
      justify-content: space-between;
      margin-top: 30px;
      grid-row-gap: 30px;
      text-align: center;
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child {
          justify-content: flex-start;
        }
        .el-input {
          width: 150px;
        }
        
        & > span {
          display: inline-block;
          margin: 0 20px;
        }
        .el-input__prefix {
          line-height: 40px;
        }
        .prefix {
          color: #000;
        }
        .input-group {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .el-input {
            width: 70px;
          }
        }
        &:last-child {
          display: flex;
          align-items: center;
          .el-icon-delete {
            cursor: pointer;
            display: inline-block;
            margin-left: 20px;
          }
        }
      }
      &.error {
        li {
          .el-input__inner {
            border: 1px solid red;
            color: red !important;
          }
        }
      }
    }
    & > footer {
      padding: 20px;
      box-sizing: border-box;
      margin-top: 30px;
      font-size: 30px;
      color: #000;
      display: flex;
      justify-content: center;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .btn-group {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 30px;
    }
  }
</style>